<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>刮刮卡</title>
    <style>
        .ggk{
            margin: 0px auto;
            width: 200px;
            height: 100px;
            border:1px solid #000000;
            position: relative;
        }
        .ggk span{
            position: absolute;
            color:#f00;
            font-size: 50px;
            width:100%;
            height:100%;
            line-height: 100px;
            text-align: center;
        }
        canvas{
            position: absolute;
            top:0;
            left:0;
        }
    </style>
</head>
<body>
    <div class="ggk">
        <span id="span">200元</span>
        <canvas id="canvas"></canvas>
    </div>
    <script>
    
    var canvas=document.getElementById("canvas");
    init();
    function init(){
        canvas.width= 200;
        canvas.height= 100;
        var ctx=canvas.getContext("2d");
         result(); 
        drawCover(ctx);
        drawStroke(ctx);
    }
    //span 内容
    function result(){
       var  span=document.getElementById("span");
       var arr=['200元','250元','250元','300元','谢谢','谢谢','谢谢','谢谢','谢谢','谢谢'];
       var text=arr[randomInt(0,arr.length-1)];
       span.innerHTML=text;
    }
    //随机
    function randomInt(from,to){
      return parseInt(Math.random()*(to-from+1));
    }
    //绘制覆盖层
    function drawCover(ctx){
        ctx.save();
        ctx.fillStyle="rgb(100,100,100)";
        ctx.fillRect(0,0,200,100);
        ctx.restore();
    }
    //绘制 滑动变颜色
    function drawStroke(ctx){
        canvas.onmousedown=function(e){
            var downX=e.offsetX;
            var downY=e.offsetY;
            ctx.beginPath();              
            ctx.globalCompositeOperation='destination-out';
            ctx.lineWidth=10;
            ctx.moveTo(downX,downY);
            canvas.onmousemove=function(e){
                var x=e.offsetX;
                var y=e.offsetY;
                ctx.lineTo(x,y);
                ctx.stroke();

            }
        }
        canvas.onmouseup=function(){
            canvas.onmousemove=null;
        }
    }
    </script>
</body>
</html>